<template>
  <div class="post-list">
    <PostCard v-for="post in posts" :key="post.id" :post="post" />
  </div>
</template>

<script setup>
import PostCard from './PostCard.vue'
const props = defineProps({
  posts: {
    type: Array,
    required: true,
  },
})
</script>

<style scoped>
.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(640px, 1fr));
  gap: 1.2rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.5rem 2.5rem 0.5rem; /* 底部为悬浮按钮预留空间 */
}
@media (max-width: 700px) {
  .post-list {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0.5rem 0.2rem 2.5rem 0.2rem;
  }
}
::v-deep .post-card {
  max-width: 900px;
}
</style>
